<!-- <template>
  <div>
    <a-menu
      mode="inline"
      theme="dark"
      @click="route_to"
      :default-open-keys="['teacher_course']"
      style="min-height: 1000px"
    >
      <a-menu-item key="teacher_index">
        <a-icon type="arrow-up" />
        <span style="color: white">首页</span>
      </a-menu-item>
      <a-menu-item key="teacher_resource">
        <a-icon type="arrow-up" />
        <span>资源管理</span>
      </a-menu-item>
      <a-menu-item key="teacher_preCourse">
        <a-icon type="arrow-up" />
        <span>我要备课</span>
      </a-menu-item>
    </a-menu>
  </div>
</template> -->

<template>
  <div class="menu">
    <div class="menu_side">
      <div class="menu_side_margin">
        <div class="menu_side_item" name="teacher_index" @click="route_to('teacher_index')">
          <div class="menu_side_item_border">
            <svg class="menu_side_item_icon">
              <use
                xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-home"
              ></use>
            </svg>
            <div class="menu_side_item_text"> 首页</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_side">
      <div class="menu_side_margin">
        <div class="menu_side_item" name="teacher_resource" @click="route_to('teacher_resource')">
          <div class="menu_side_item_border">
            <svg class="menu_side_item_icon">
              <use
                xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-stack"
              ></use>
            </svg>
            <div class="menu_side_item_text"> 资源管理</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_side">
      <div class="menu_side_margin">
        <div class="menu_side_item" name="teacher_preCourse" @click="route_to('teacher_preCourse')">
          <div class="menu_side_item_border">
            <svg class="menu_side_item_icon">
              <use
                xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-pen"
              ></use>
            </svg>
            <div class="menu_side_item_text"> 我要备课</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_side">
      <div class="menu_side_margin">
        <div class="menu_side_item" name="teacher_test" @click="route_to('teacher_test')">
          <div class="menu_side_item_border">
            <svg class="menu_side_item_icon">
              <use
                xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-folder-open"
              ></use>
            </svg>
            <div class="menu_side_item_text"> 课程试题</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_side">
      <div class="menu_side_margin">
        <div class="menu_side_item" name="teacher_homework" @click="route_to('teacher_homework')">
          <div class="menu_side_item_border">
            <svg class="menu_side_item_icon">
              <use
                xlink:href="../../../assets/img/icons/AsideSvg.svg#icon-file-text"
              ></use>
            </svg>
            <div class="menu_side_item_text"> 课程作业</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    route_to(key) {
      let item1 = document.getElementsByClassName("menu_side_item");
      for(let i = 0; i < item1.length; i++) {
        if(item1[i].attributes[0].value == key ) {
          item1[i].className = "menu_side_itemfocus";
        } else {
          item1[i].className = "menu_side_item";
        }
      }
      let item2 = document.getElementsByClassName("menu_side_itemfocus");
      for(let i = 0; i < item2.length; i++) {
        if(item2[i].attributes[0].value == key ) {
          item2[i].className = "menu_side_itemfocus";
        } else {
          item2[i].className = "menu_side_item";
        }
      }
      if (this.$route.name !== key) {
        this.$router.push({ name: key });
      }
    },
  },
};
</script>

<style lang="scss">

</style>